<template>
  <a-modal :width="640" :visible="visible" title="$t('modulesTaskForm.rwtj')" @ok="handleSubmit" @cancel="visible = false">
    <a-form @submit="handleSubmit" :form="form">
      <a-form-item
        label="$t('modulesTaskForm.rwmc')"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input v-decorator="['taskName', {rules:[{required: true, message: '{{ $t('modulesTaskForm.qsrrwmc') }}'}]}]" />
      </a-form-item>
      <a-form-item
        label="$t('modulesTaskForm.kssj')"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-date-picker style="width: 100%" v-decorator="['startTime', {rules:[{required: true, message: '{{ $t('modulesTaskForm.qxzkssj') }}'}]}]" />
      </a-form-item>
      <a-form-item
        label="$t('modulesTaskForm.rwfzr')"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-select v-decorator="['owner', {rules:[{required: true, message: '{{ $t('modulesTaskForm.qxzkssj') }}'}]}]">
          <a-select-option :value="0">{{ $t('modulesTaskForm.fxx') }}</a-select-option>
          <a-select-option :value="1">{{ $t('modulesTaskForm.zmm') }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="$t('modulesTaskForm.cpms')"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-textarea v-decorator="['desc']"></a-textarea>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  name: 'TaskForm',
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },

      visible: false,
      form: this.$form.createForm(this)
    }
  },
  methods: {
    add () {
      this.visible = true
    },
    edit (record) {
      const { form: { setFieldsValue } } = this
      this.visible = true
      this.$nextTick(() => {
        setFieldsValue({ taskName: 'test' })
      })
    },
    handleSubmit () {
      const { form: { validateFields } } = this
      this.visible = true
      validateFields((errors, values) => {
        if (!errors) {
          console.log('values', values)
        }
      })
    }
  }
}
</script>
